parallax post image fix
3 changed files with 23 additions and 17 deletions
+ 13
- 14
app/assets/javascripts/start.js
@@ -1,14 +1,16 @@ |
||
| 1 | 1 |
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable |
| 2 | 2 |
function attachHandler(jQuery) {
|
| 3 |
+ |
|
| 4 |
+ $('#post-image').css('height', (window.height- 102));
|
|
| 3 | 5 |
var mainbottom = $('#myCarousel').offset().top + ($('#myCarousel').height()*2)-10;
|
| 4 |
- var about_bottom = $('#post').offset().top + $('#post-image').height() - (screen.height - $('#post-image').height() + 152);
|
|
| 5 |
- var post_bottom = $('.feature-post-text').offset().top + $('.feature-post-text').height() - (screen.height - $('.feature-post-text').height() + 232);
|
|
| 6 |
- |
|
| 6 |
+ var about_bottom = $('#post').offset().top + $('#post-image').height() - 102;
|
|
| 7 |
+ var post_bottom = $('.feature-post-text').offset().top + $('.feature-post-text').height() -102;
|
|
| 8 |
+ |
|
| 7 | 9 |
// on scroll, |
| 8 | 10 |
$(window).on('scroll',function(){
|
| 9 | 11 |
|
| 10 | 12 |
// we round here to reduce a little workload |
| 11 |
- stop = Math.round($(window).scrollTop()); |
|
| 13 |
+ stop = Math.round($(document).scrollTop()); |
|
| 12 | 14 |
if (stop > mainbottom) {
|
| 13 | 15 |
$('.navbar-inner').addClass('past-main');
|
| 14 | 16 |
} else {
|
@@ -21,7 +23,7 @@ function attachHandler(jQuery) {
|
||
| 21 | 23 |
$(window).on('scroll',function(){
|
| 22 | 24 |
|
| 23 | 25 |
// we round here to reduce a little workload |
| 24 |
- stop = Math.round($(window).scrollTop()); |
|
| 26 |
+ stop = Math.round($(document).scrollTop()); |
|
| 25 | 27 |
if (stop > about_bottom) {
|
| 26 | 28 |
$('#post-image').addClass('affix top-affix ');
|
| 27 | 29 |
} else {
|
@@ -34,13 +36,14 @@ function attachHandler(jQuery) {
|
||
| 34 | 36 |
$(window).on('scroll',function(){
|
| 35 | 37 |
|
| 36 | 38 |
// we round here to reduce a little workload |
| 37 |
- stop = Math.round($(window).scrollTop()); |
|
| 39 |
+ stop = Math.round($(document).scrollTop()); |
|
| 38 | 40 |
if (stop > post_bottom && stop > about_bottom) {
|
| 39 | 41 |
$('#post-image').removeClass('affix top-affix ');
|
| 40 |
- var textsize = $('.feature-post-text').height() - $('#post-image').height()/2 - 80
|
|
| 42 |
+ var textsize = $('.feature-post-text').height() - $('#post-image').height()/2 - 80;
|
|
| 41 | 43 |
$('#post-image').css('margin-top', textsize);
|
| 42 | 44 |
} else {
|
| 43 | 45 |
$('#post-image').css('margin-top', '0');
|
| 46 |
+ $('#post-image').css('top', (($(document).scrollTop() - about_bottom - 102)) * -0.1);
|
|
| 44 | 47 |
} |
| 45 | 48 |
|
| 46 | 49 |
}); |
@@ -69,15 +72,11 @@ function attachHandler(jQuery) {
|
||
| 69 | 72 |
}, 1000); |
| 70 | 73 |
}); |
| 71 | 74 |
|
| 72 |
- window.setInterval(function(){
|
|
| 73 |
- var mainbottom = $('#myCarousel').offset().top + ($('#myCarousel').height()*2)-10;
|
|
| 74 |
- var about_bottom = $('#post').offset().top + $('#post-image').height() - (screen.height - $('#post-image').height() + 152);
|
|
| 75 |
- var post_bottom = $('.feature-post-text').offset().top + $('.feature-post-text').height() - (screen.height - $('.feature-post-text').height() + 232);
|
|
| 76 |
- }, 5000); |
|
| 77 | 75 |
$( window ).resize(function(){
|
| 76 |
+ $('#post-image').css('height', (window.height- 102));
|
|
| 78 | 77 |
var mainbottom = $('#myCarousel').offset().top + ($('#myCarousel').height()*2)-10;
|
| 79 |
- var about_bottom = $('#post').offset().top + $('#post-image').height() - (screen.height - $('#post-image').height() + 152);
|
|
| 80 |
- var post_bottom = $('.feature-post-text').offset().top + $('.feature-post-text').height() - (screen.height - $('.feature-post-text').height() + 232);
|
|
| 78 |
+ var about_bottom = $('#post').offset().top + $('#post-image').height() - 102;
|
|
| 79 |
+ var post_bottom = $('.feature-post-text').offset().top + $('.feature-post-text').height() -102;
|
|
| 81 | 80 |
}); |
| 82 | 81 |
}; |
| 83 | 82 |
|
+ 5
- 0
app/assets/stylesheets/start.css.less
@@ -113,6 +113,11 @@ margin-top: 8px; |
||
| 113 | 113 |
width: 33%; |
| 114 | 114 |
} |
| 115 | 115 |
|
| 116 |
+.maison {
|
|
| 117 |
+ background-image: url(post_maison.jpg); |
|
| 118 |
+ background-size: cover; |
|
| 119 |
+} |
|
| 120 |
+ |
|
| 116 | 121 |
.thumb-text {
|
| 117 | 122 |
text-transform: uppercase; |
| 118 | 123 |
color: white; |
+ 5
- 3
app/views/start/index.html.erb
@@ -43,11 +43,13 @@ |
||
| 43 | 43 |
</div> |
| 44 | 44 |
<div style="margin-top: 50px;"></div> |
| 45 | 45 |
|
| 46 |
+ |
|
| 46 | 47 |
<div id="design" class="thumb"><div class="thumb-text">Design</div></div> |
| 47 | 48 |
<div id="agencia" class="thumb"><div class="thumb-text">Agência</div></div> |
| 48 |
- <div id="editora" class="thumb"><div class="thumb-text">Editora</div></div> |
|
| 49 |
+ <div id="editora" class="thumb"><div class="thumb-text">Editora</div></div> |
|
| 49 | 50 |
|
| 50 | 51 |
|
| 52 |
+<div class="clearfix"></div> |
|
| 51 | 53 |
|
| 52 | 54 |
|
| 53 | 55 |
<div id="about2" class="container"> |
@@ -65,8 +67,8 @@ |
||
| 65 | 67 |
</div> |
| 66 | 68 |
|
| 67 | 69 |
<div id="post" style="margin-top: 80px; " class=""> |
| 68 |
- <div id="post-image" class="pull-left" style="width: 50%; height: 1000px; overflow: hide;"> |
|
| 69 |
- <%= image_tag "post_maison.jpg", style: 'width: 100%; max-height: 1000px;'%> |
|
| 70 |
+ <div id="post-image" class="maison pull-left" style="width: 50%; height: 1000px; overflow: hide;"> |
|
| 71 |
+ |
|
| 70 | 72 |
</div> |
| 71 | 73 |
<div class="pull-right" style="width: 50%; background-color: #F7F7F7;"> |
| 72 | 74 |
<div style="padding: 50px; padding-top: 20px; width: 70%"> |